<template>
  <div>
    <ksh-layout>
      <template #left>
        <echart-main>
          <template #title> 党政建设 </template>
          <template #echart>
            <party />
          </template>
        </echart-main>
        <echart-main class="box">
          <template #title> 党员年龄比例 </template>
          <template #echart>
            <echart :options="option1"  />
          </template>
        </echart-main>
        <echart-main class="box">
          <template #title> 党员年龄比例 </template>
          <template #echart>
            <echart :options="option2"  />
          </template>
        </echart-main>
      </template>
      <template #right>
        <echart-main>
          <template #title> 党政要闻 </template>
          <template #echart>
            <div class="right-content">
              <div class="xwMain">
                <p v-for="item in news">{{ item }}</p>
              </div>
            </div>
            <div class="sel-main">
              <div class="sel-ul">
                <span
                  v-for="(item, index) in nav1"
                  :class="{ selSpan: nav1index === index }"
                  @click="nav1click(index)"
                  >{{ item }}</span
                >
              </div>
              <div class="cun-main">
                <div>
                  <p>村委会</p>
                  <p>5</p>
                </div>
                <div>
                  <p>村支部</p>
                  <p>5</p>
                </div>
              </div>
              <div class="img-main">
                <img src="~assets/img/ksh/img4.jpg" alt="">
                <img src="~assets/img/ksh/img2.jpg" alt="">
                <img src="~assets/img/ksh/img3.jpg" alt="">
                <img src="~assets/img/ksh/img5.jpg" alt="">
              </div>
            </div>
            <div class="sel-main">
              <div class="sel-ul">
                <span
                  v-for="(item, index) in nav2"
                  :class="{ selSpan: nav2index === index }"
                  @click="nav2click(index)"
                  >{{ item }}</span
                >
              </div>
              <div class="img-main">
                <img src="~assets/img/ksh/img1.jpg" alt="">
                <img src="~assets/img/ksh/img6.jpg" alt="">
                <img src="~assets/img/ksh/img7.jpg" alt="">
                <img src="~assets/img/ksh/img8.jpg" alt="">
              </div>
            </div>
          </template>
        </echart-main>
      </template>
    </ksh-layout>
  </div>
</template>

<script>
import Echart from "components/common/echart/Echart.vue";
import KshLayout from "components/content/layoutMain/KshLayout.vue";
import EchartMain from "components/content/echartMain/EchartMain.vue";
import { echart12, echart1 } from "./option";
import Party from 'components/content/item/Party.vue';
export default {
  components: { Echart, KshLayout, EchartMain, Party },
  data() {
    return {
      option1: null,
      option2: null,
      peoples: [
        {
          name: "王自健",
          tel: "1850316003",
        },
        {
          name: "王自健",
          tel: "1850316003",
        },
        {
          name: "王自健",
          tel: "1850316003",
        },
        {
          name: "王自健",
          tel: "1850316003",
        },
      ],
      news: [
        "标题标题标题标题标题标题标题",
        "标题标题标题标题标题标题标题",
        "标题标题标题标题标题标题标题",
        "标题标题标题标题标题标题标题",
        "标题标题标题标题标题标题标题",
      ],
      nav1: ["村组织", "群众组织", "自治组织"],
      nav1index: 0,
      nav2: ["党委活动", "基层治理", "各级关怀"],
      nav2index: 0,
    };
  },

  created() {
    this.option1 = echart12([
      { value: 40, name: "28岁以下" },
      { value: 38, name: "29-35岁" },
      { value: 32, name: "36-50岁" },
      { value: 30, name: "51-60岁" },
      { value: 50, name: "61岁以上" }
    ]);
    this.option2 = echart1({
      x:['高中', '专科', '本科', '本科以上'],
      y:[700, 390, 490, 540, 270, 392],
      y2:[594, 500, 500, 450, 390, 490]
    });
  },

  methods: {
    nav1click(index) {
      this.nav1index = index;
    },
    nav2click(index) {
      this.nav2index = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.right-content {
  width: 100%;
  height: 12.5rem;
  padding: 1.25rem 1.25rem 0;
  box-sizing: border-box;
  .xwMain {
    overflow: auto;
    height: 100%;
    p {
      margin: 0;
      color: #fff;
      line-height: 1.875rem;
      padding: 0 1.25rem;
      text-align: center;
      background: url(~assets/img/sy/dzbg.png) no-repeat;
      background-size: 100% 100%;
      margin-bottom: 0.3125rem;
    }
  }
}
.sel-ul {
  display: flex;
  justify-content: space-around;
  margin-top: 0.625rem;
  span {
    color: #4affff;
    display: inline-block;
    border: 0.0625rem solid #4affff;
    padding: 0.3125rem 0.625rem;
    opacity: 0.5;
    cursor: pointer;
    width: 5rem;
    text-align: center;
  }
  .selSpan {
    opacity: 1;
  }
}
.cun-main {
  display: flex;
  padding-top: 1.25rem;
  justify-content: space-around;
  text-align: center;
  color: #4affff;
  font-size: 1rem;
  div {
    p:nth-child(2) {
      font-family: "shuzi";
      font-size: 1.5rem;
    }
  }
}
.sel-main {
  padding: 0 1.25rem;
}
.img-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 0.625rem;
  img {
    width: 48%;
    margin: 0.3125rem 0;
  }
}
.box {
  height: 16.875rem;
}
</style>
